<template>
    <div class="scroll-wrapper" ref="wrapper">
        <div class="scroll-content">

           <index-swiper
            :swiperData="swiperData"
           ></index-swiper>

           <main-title
             :data="{field_name: '推荐课程', field: 'all'}"
           ></main-title>

           <recom-course-list
            :recomCourseData="recomCourseData"
           ></recom-course-list>

           <div v-if="fieldData.length > 0 && courseData.length > 0">
               <main-title
                    :data="fieldData[0]"
                ></main-title>

                <course-list
                 :courseData="courseData | filterCourseData('0')"
                ></course-list>

                <main-title
                    :data="fieldData[1]"
                ></main-title>

                <course-list
                 :courseData="courseData | filterCourseData('1')"
                ></course-list>

                <main-title
                    :data="fieldData[2]"
                ></main-title>

                <course-list
                 :courseData="courseData | filterCourseData('2')"
                ></course-list>

                <main-title
                    :data="fieldData[3]"
                ></main-title>

                <course-list
                 :courseData="courseData | filterCourseData('3')"
                ></course-list>
           </div>

        </div>
    </div>
</template>

<script>
import BetterScroll from 'better-scroll';//屏幕滚动插件

import { PULL_DOWN_TEXT } from 'utils/config';

import IndexSwiper from './IndexSwiper/index'
import MainTitle from './MainTitle'
import recomCourseList from './RecomCourseList'
import CourseList from './CourseList'

import IndexModel from 'models/Index'

const indexModel  = new IndexModel();

export default {
    name: 'IndexScrollWrapper',
    props: {},

    components: {
        IndexSwiper,
        MainTitle,
        recomCourseList,
        CourseList
    },

    data () {
        return {
            swiperData: [],
            fieldData: [],
            courseData: [],
            recomCourseData: []
        }
    },

    mounted () {
        this.getCourseDatas();

        //（竖向屏幕滚动）better-scroll实例化以及其相关配置
        this.scroll = new BetterScroll(this.$refs.wrapper, {
            mouseWheel: true,//鼠标的滑轮可用
            click: true,//点击是生效的
            tap: true,//单点触摸是生效的
            pullDownRefresh: {
                threshold: 50,
                stop: 50
            },
        });

        this.scroll.on('pullingDown', this.onPullingDown);//监听BetterScroll下拉事件
    },

    methods: {
        async getCourseDatas () {
            const data = await indexModel.getCourseDatas(),
                  res = data.result;
              //console.log(data);

            this.swiperData = res.swipers;
            this.fieldData = res.fields;
            this.courseData = res.courses;
            this.recomCourseData = res.recomCourses;
        },

        onPullingDown () {
            // console.log(this.scroll)
            this.$emit('onPullingDown', PULL_DOWN_TEXT.PULLING);
            this.getCourseDatas();//下拉刷新，重新请求数据

            setTimeout(() => {
                this.$emit('onFinishedPullDown', PULL_DOWN_TEXT.FINISHED);

                setTimeout(() => {
                    this.$emit('onResetLoadingText', PULL_DOWN_TEXT.ORIGIN);
                    this.scroll.finishPullDown();//finishPullDown()这个函数是BetterScroll里面的函数
                }, 500);
            }, 1500);
            
        },
    }
}
</script>

<style lang="scss" scoped>

</style>